<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-input
          v-model="queryParams.keyword"
          @keyup.enter.native="changeOption"
          clearable
          @clear="changeOption"
          placeholder="搜索代理名称"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>
      </div>
      <div class="right">
        <el-button @click="editAgent(null)" icon="el-icon-plus" type="primary">添加代理</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        border
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          prop="nickname"
          label="名称"
          align="center"
          min-width="200"
          fixed="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          min-width="300"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{row.status === 1 ? '合作中' : '停止合作'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="op"
          label="操作"
          align="center"
          min-width="200"
          fixed="right"
        >
          <template v-slot="{row}">
            <el-button @click="editAgent(row)" type="primary">修改</el-button>
            <template v-if="row.status === 1">
              <el-button type="danger" @click="stopStatus(row.id)">停止合作</el-button>
            </template>
            <template v-else-if="row.status === 0">
              <el-button type="success" @click="startStatus(row.id)">恢复合作</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>

      <el-dialog
        :title="dialogForm.id ? '修改代理' : '添加代理'"
        :visible.sync="dialogVisible"
        width="500px"
      >
        <div>
          <el-form :model="dialogForm" ref="form" :rules="rules" label-width="100px" label-suffix="：">
            <el-form-item label="名称" prop="nickname">
              <el-input v-model="dialogForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :autosize="{minRows: 2}"
                v-model="dialogForm.remark"
                placeholder="可添加更多代理的备注"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio v-model="dialogForm.status" :label="1">合作中</el-radio>
              <el-radio v-model="dialogForm.status" :label="0">停止合作</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDialog" :loading="dialogLoading">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {checkAgentNickname, getAgentList, saveAgent, startAgent, stopAgent} from "@/api/agent";
import {deepCopy} from "@/utils";

export default {
  name: "agentSetting",
  data(){
    const checkNickname = (rule, value, callback) => {
      checkAgentNickname(this.dialogForm)
        .then(res=>{
          if(res.error !== 0){
            callback(new Error(res.message));
          }else{
            callback();
          }
      })
    };

    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        keyword: '',
      },
      tableData: [],
      total: 0,
      loading: false,
      dialogForm: {
        id: '',
        nickname: '',
        remark: '',
        status: 1,
      },
      dialogVisible: false,
      dialogLoading: false,
      rules: {
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          { validator:checkNickname, trigger: 'blur' },
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      this.loading = true
      getAgentList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    editAgent(row = null){
      if(row !== null){
        this.dialogForm = deepCopy(row)
      }else{
        this.dialogForm = {
          id: '',
          nickname: '',
          remark: '',
          status: 1,
        }
      }
      this.dialogVisible = true
    },
    submitDialog(){
      this.$refs.form.validate(valid =>{
        if(valid){
          this.dialogLoading = true
          saveAgent(this.dialogForm)
            .then(res=>{
              this.dialogLoading = false
              this.$sMsg(res.message)
              this.dialogVisible = false
              if(this.dialogForm.id){
                this.getData()
              }else{
                this.changeOption()
              }
            })
        }
      })
    },
    stopStatus(id){
      this.$confirm('', '确定要停止合作吗?')
        .then(()=>{
          stopAgent(id)
            .then((res)=>{
              this.$sMsg(res.message)
              this.getData()
            })
        })
        .catch(()=>{})

    },
    startStatus(id){
      startAgent(id)
        .then((res)=>{
          this.$sMsg(res.message)
          this.getData()
        })
    }
  },
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 20px;
  .header{
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
    }
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
